<template>
  <div>
    <Loading :isLoading="menuActionStore.isLoading">
    <div class="flex">
      <Card class="mr-3 w-6">
        <template #title>功能权限</template>
        <template #content>
          <EditForm :menuId="(route.params.id as string)" />
        </template>
      </Card>

      <Card class="flex-1">
        <template #title>已配置功能权限 <span class="text-base">（菜单栏：{{ route.query.name }}）</span></template>
        <template #content>
          <ConfigAction :menuId="(route.params.id as string)" />
        </template>
      </Card>
    </div>
  </Loading>
  </div>
</template>

<script lang="ts" setup>
import { useMenuActionStore } from '@/stores/menuAction'
import { useMenuStore } from '@/stores/menu'
import { onMounted, watch, ref } from 'vue';
import { useRoute } from 'vue-router'
import { Card } from '@/utils/primevue'
import Loading from '@/components/Loading/Loading-component'
import EditForm from './components/EditForm.vue'
import ConfigAction from './components/ConfigAction.vue'
import type { TAllMenuInfo } from '@/typing/base';

const menuActionStore = useMenuActionStore()
const menuStore = useMenuStore()
const route = useRoute()
const currentMenu = ref<TAllMenuInfo>()

// 刷新当前页面没有 menu 数据
// watch(route, (newVal) => {
//   const current = menuStore.filterMenu(parseInt(route.params.id as string));
//   currentMenu.value = current
// }, { immediate: true })

console.log('route', route)

onMounted(() => {
  menuActionStore.queryMenuActionList(route.params.id as string)
})

</script>

<style scoped>

</style>
